<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        border: 2px solid #f00;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <h1>下面用到了diff算法: 开始内部自己实现diff算法的逻辑</h1>
    <i>1.vue中操作 vnode {tag: 'div',data: children}</i>
    <br />
    <i>2. 真正DOM 特别多 会消耗性能</i>
    <br />
    <i>3. 更新数据 vue diff算法 最小量更新（比对）vnode(old,new)</i>
    <br />
    <i
      >4.案例：小试牛刀==> 创建两个vnode,比对 当数据更新的时候拿到老的节点
      和新的节点 做对比，将不同的地方进行dom的更新
    </i>
    <hr />

    <div id="app">
      <h1 key="zmy">经过diff算法会复用该内容</h1>
      <span>下面的姓名经过diff算法 内容不一样 会创建新的文本内容节点</span>
      <h2>{{name}}</h2>
    </div>

    <script src="dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            name: "张沐阳",
          };
        },
        watch: {
          name: function (val) {
            console.log(val, "val-name-watch");
          },
        },
      });
      setTimeout(() => {
        vm.name = "张旭阳哈哈哈哈张永全冯海霞";
      }, 2500);
    </script>
  </body>
</html>
